<template>
    <el-select v-model="svalue" placeholder="请选择" filterable clearable @change="handleButton" @clear="clearButton">
        <el-option
            v-for="item in options"
            :key="item.dictCode"
            :label="item.dictValue"
            :value="item.dictCode">
        </el-option>
    </el-select>
</template>
<script>

    export default {
        name: 'BaseSelect',
        data() {
            return {
                options:[],
                svalue: this.value
            }
        },
        props: {
            dictType: {
                type:String
            },//请求的码表值
            value: {
                type: String
            }//接受外部v-model传入的值
        },
        methods: {
            // 获取下拉框数据
            getDictionary_option(dictType){
                const array = JSON.parse(sessionStorage.getItem("dictList"));
                array.forEach(element => {
                    if(element.dictCode == dictType){
                        this.options = element.children;
                    }
                });
                
            },
            // 下拉框点击事件
            handleButton(){
                /* 子组件通过事件发射向父组件传递事件及参数，$emit即为发射事件
                   第一个参数为向父组件传递的事件名，第二个参数为向父组件传递的参数 */
                this.$emit( 'handleButton', this.svalue);
            },
            clearButton(){
                this.$emit('clearButton',this.svalue);
            }
        },
        watch:{
            //判断下拉框的值是否有改变
            value(val) {
                this.svalue = val;//②监听外部对props属性result的变更，并同步到组件内的data属性myResult中
            },
            svalue(val, oldVal){
                if(val!=oldVal) {
                    this.$emit("input", val);//③组件内对myResult变更后向外部发送事件通知
                }
            }
        },
        mounted(){
            // this.svalue=this.value;//初始话下拉框的值
            this.getDictionary_option(this.dictType);
        }
    }
</script>